<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_966645_jo87cr0e72k.css">
    <link rel="stylesheet" href="css/test.css">
</head>
<body>
    
    <div id="app">
        <comment-box></comment-box>
    </div>

    <!-- 父组件 -->
    <template id="commentBox">
        <div class="comment_box">
            <div class="comment_edit clearfix">
                <textarea name="" id="" v-model="commentContent"></textarea>
                <div class="comment_button">
                    <button @click="send">发表</button>
                </div>
            </div>
            <div class="comment_area">
                <template>
                    <comment-list v-for="(item,key) in commentArray" :res-Message="{item:item,key:key}"
                    :key="key" @to-top="toTop" @del-comment="delComment" @comment-like="commentLike"></comment-list>
                </template>
                
                
            </div>
        </div>
    </template>

    <!-- 子组件 -->
    <template id="commentList">
        <div class="comment_list clearfix">
            <div class="comment_item-image">
                <img src="./img/qq.png" alt="" />
            </div>
            <div class="comment_item-content">
                <div class="clearfix">
                    <div class="comment_info">
                        <div class="info_name">XXX</div>
                        <div class="info_date">
                            <small>{{resMessage.item.sendDate}}</small>
                        </div>
                        <div class="info_content">{{resMessage.item.sendComment}}</div>
                    </div>
                    <div class="top_comment" @click="toTop" :id="resMessage.key">
                        <i class="iconfont icon-top"></i>
                    </div>
                </div>
                <div class="comment_operation">
                    <div class="operation_item good" @click="star(resMessage.key)" :class="{active: resMessage.item.isStar}">
                        <i class="iconfont icon-dianzan"></i>
                        <span>{{resMessage.item.starCount}}</span>
                    </div>
                    <div class="operation_item comment" >
                        <i class="iconfont icon-pinglun"></i>
                        <span>评论</span>
                    </div>
                    <div class="operation_item delete" @click="delComment(resMessage.key)" >
                        <i class="iconfont icon-shanchu"></i>
                        <span>删除</span>
                    </div>
                </div>
            </div>
        </div>
    </template>

    <script src="js/vue.js"></script>
    <script>
        /*
            心得：
                1.v-for 可以配合 Prop 渲染子组件，但是 v-for返回的参数(item,index)不会传入子组件

                2.v-bind 绑定属性，绑定class会使得每个节点拥有独立的空间，操作数据的时候不会全部都影响，只影响自身，**在不使用同一个数据源的情况下

                3.父组件通常用于控制数据，子组件一般作为渲染的载体，用于以可视化的形式显示从父元素传递的数据，这么做的好处是统一处理数据和统一渲染；只要修改父元数的数据(注意：数组修改需要使用异变方法和set/$set才会触发vue去更新视图；对象如果新添加属性需要使用set/$set或者_.extend()和Object.assign() )

                4.侦听器 watch 用于监听数据的变化，但要求该数据的更新是'合法范围'，即vue内部的 watcher能侦听到，粗俗点的说法就是数据更新会触发视图的更新。

                5.localStorage 本地缓存，没有时间限制，可以配合侦听器来存储被修改的数据，再结合生命周期，诸如:created/mounted阶段等，如果有存储数据即使用它作为初始化Vue实例的数据
         */


        //子组件
        const commentList = {
            template: '#commentList',
            data(){
                return {
                   
                }
            },
            props:{
                resMessage:{
                    type: [Array,Object],
                    require: true
                }
            },
            methods:{
                //点赞
                star(index){
                    this.$emit("comment-like",index)
                },
                //置顶
                toTop(event){
                    var id = 0;
                    //如果点击父节点
                    if(event.target.id){
                        id = event.target.id;
                    }else{//点击子节点
                        id = event.target.parentElement.id;
                    }
                    
                    //告诉父类，我要置顶的节点下标
                    this.$emit('to-top',id);
                },
                //删除评论
                delComment(key){
                    this.$emit('del-comment', key);
                }
            }
        }

        //父组件
        Vue.component('comment-box',{
            template: '#commentBox',
            //初始化数据的阶段
            created(){
                var local_comment = localStorage.getItem('local_comment');
                local_comment = JSON.parse(local_comment);
                //如果本地有已存储数据就使用
                if(local_comment){
                    this.commentArray = local_comment;
                }
            },
            data(){
                return {
                    //父组件输入内容
                    commentContent: '',
                    //装载所有用户评论数据的数组
                    commentArray: []
                }
            },
            components: {
                //子组件
                'comment-list': commentList
            },
            //侦听器
            watch:{
                commentArray(newValue){
                    newValue = JSON.stringify(newValue);
                    localStorage.setItem('local_comment',newValue);
                }
            },
            methods: {
                //按下发表按钮后触发的函数
                send(){
                    var date = new Date();
                    //当地时间
                    var nowTime = date.getFullYear() + '年' + (date.getMonth()+1) + '月' + date.getDate() + '日' + ' ' + date.getHours() + '小时' + date.getMinutes() + '分钟' + date.getSeconds() + '秒'

                    //子组件接收内容
                    var sendMessage = {
                        sendComment: this.commentContent,
                        sendDate: nowTime,
                        //点赞数量
                        starCount: 0,
                        //激活点赞效果的标志
                        isStar: false
                    }

                    //不渲染空数据
                    if(sendMessage.sendComment != '' && sendMessage.sendComment != ' '){
                      //添加新的评论到装载车上(数组)
                      this.commentArray.unshift(sendMessage);  
                    }
                    //清空textarea之前输入的内容
                    this.commentContent = '';
                },
                commentLike(index){
                    //类似开关，原先点赞再点击一次就取消
                    if(this.commentArray[index].isStar){
                        this.commentArray[index].isStar = false;
                        this.commentArray[index].starCount--;
                    }else{
                        this.commentArray[index].isStar = true;
                        this.commentArray[index].starCount++;
                    }
                },
                toTop(index){
                    //置顶传入的下标对应的对象
                    console.log(this.commentArray);
                    //截取要置顶的对象
                    var toTopItem = this.commentArray[index];
                    //删除其原本下标对应的对象
                    this.commentArray.splice(index,1);
                    //在队头插入该对象
                    this.commentArray.unshift(toTopItem);
                },
                delComment(index){
                    this.commentArray.splice(index,1);
                }
            }
        });

        //实例
        new Vue({
            el: '#app',
            data: {
                
            }
        });

    </script>
</body>
</html>